<template>
	<el-dialog
		width="700px"
		:append-to-body="true"
		:close-on-click-modal="false"
		:visible.sync="isShow"
	>
		<template #title>
			<div class="dialog-title">试题识别异常提示</div>
		</template>
		<div class="error-wrapper">
			<div class="error-list" v-for="(item,index) in questionList" :key="index">
				<p class="title">{{ item.questionTypeName }}</p>
				<div class="error-info">
					<div v-for="(question) in item.questionTypeDataList" :key="question.qIndex">
						<div class="error-info-item" v-if="question.isError">
							<span class="q-seq">第{{ question.index }}题:</span>
							<span v-for="(error) in question.errorInfo" :key="error.errorField">
								{{ error.errorMessage }};
								<!-- <span v-if="eIndex!==question.errorInfo.length-1">;</span> -->
							</span>
						</div>
						<!-- 错误提示只显示错误的小题 -->
						<div class="error-info-item" v-for="(sub,subIndex) in question.smallQuestionList.filter(sq=>sq.isError)" :key="subIndex">
							<span class="q-seq">第{{ sub.index }}题：</span>
							<span v-for="(error) in sub.errorInfo" :key="error.errorField">
								{{ error.errorMessage }};
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>
<script>
export default {
    name:'test-specification',
    props:{
        // 弹窗显示
        show:{
            type:Boolean,
            default:false
        },
        questionList:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return{
            isShow:false,
            combinedType: ["A", "CF", "L", "C"], //组合题型
        };
    },
    watch:{
        show(val){
            this.isShow = val;
        },
        isShow(val){
            this.$emit('update:show',val);
        }
    }
};
</script>
<style scoped lang="less">
.dialog-title{
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: bold
}
.error-wrapper {
    max-height: 600px;
    overflow-y: auto;

    .title{
        font-size: 16px;
        color: #333;
        line-height: 24px;
        font-weight: bold;
    }
    .error-info{
        padding: 0 10px;
        margin: 10px 0;
    }
    .error-info-item{
        line-height: 26px;
    }
    .q-seq{
        font-weight: bold;
        margin-right: 5px;
    }
}

</style>
